<template>
  <div>
    <el-button type="primary" @click="show.add=true">添加目录</el-button>
    <el-button type="primary" @click="exportConfig">导出配置</el-button>
    <el-button type="primary" @click="importConfig">手动导入配置</el-button>
  </div>

  <el-table class="table" :data="list" border>
    <el-table-column prop="id" label="ID" width="60"></el-table-column>
    <el-table-column label="默认" width="60">
      <template #default="props">
        <el-icon v-if="props.row.default"><Select /></el-icon>
      </template>
    </el-table-column>
    <el-table-column prop="path" label="目录"></el-table-column>
    <el-table-column prop="desc" label="描述"></el-table-column>
    <el-table-column prop="exclude" label="排除项">
      <template #default="props">{{ props.row.exclude.join(' | ') }}</template>
    </el-table-column>
    <el-table-column width="250" label="操作">
      <template #default="props">
        <el-button type="primary" size="small" @click="setDefault(props.row.id)">设为默认</el-button>
        <el-button size="small" @click="showExclude(props.row)">排除路径</el-button>
        <el-button type="danger" size="small" @click="del(props.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加目录 -->
  <el-dialog v-model="show.add" title="添加目录">
    <el-form :model="form" label-width="60px">
      <el-form-item label="目录">
        <span style="margin-right: 10px;">{{ form.path }}</span>
        <el-button type="primary" size="small" @click="dirSelect">选择</el-button>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="form.desc" autosize type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="add">确认</el-button>
  </el-dialog>

  <!-- 添加排除 -->
  <el-dialog v-model="show.addExclude" title="添加要排除的目录和文件">
    <el-row>
      <el-col :span="12">
        示例：
        <div>
          assets/app/temp.exe
          <br>
          assets/app
          <br>
          */temp.exe
          <br>
          */app
          <br>
          *.exe
        </div>
      </el-col>
      <el-col :span="12">
        说明(最前面不要加'/')：
        <div>
          排除指定单个文件
          <br>
          排除指定单个目录
          <br>
          排除所有该名称的文件
          <br>
          排除所有该名称的目录
          <br>
          排除指定后缀的文件
        </div>
      </el-col>
    </el-row>
    <el-input style="margin-top:20px;" v-model="formExc.content" rows="10" spellcheck="false" type="textarea"></el-input>
    <el-button style="margin-top:20px;" type="primary" @click="addExclude">确认</el-button>
  </el-dialog>
</template>

<script lang="ts">
  import lh from '../utils/lh'
  import { ElMessage,ElMessageBox } from 'element-plus'

  export default {
    data() {
      return {
        show:{
          add:false,
          addExclude:false,
        },
        list: [] as any,
        form:{
          path:'',
          desc:'',
        },
        formExc:{//排除的目录和文件
          id:0,
          content:'',
        },
      }
    },
    created(){
      lh.post('/dir/list').then(o=>{
        this.list=o
      }).catch(e=>{
        console.log(e)
        ElMessageBox.alert(e, '错误', {confirmButtonText: '确认'})
      })
    },
    methods:{
      //导入配置
      importConfig(){
        lh.post('/import/config').then(o=>{
          ElMessageBox.alert('请先备份目录：'+o.replace('/','\\')+'，然后把导出的配置解压替换即可。', '提示', {confirmButtonText: '确认'})
        }).catch(e=>{
          console.log(e)
          ElMessageBox.alert(e, '错误', {confirmButtonText: '确认'})
        })
      },
      //显示排除的路径
      showExclude(row:any){
        this.formExc.id=row.id
        this.formExc.content=row.exclude.join('\n')
        this.show.addExclude=true
      },
      //导出配置
      exportConfig(){
        lh.post('/export/config').then(o=>{
          ElMessageBox.alert('成功导出到 '+o, '提示', {confirmButtonText: '确认'})
        }).catch(e=>{
          console.log(e)
          ElMessageBox.alert(e, '错误', {confirmButtonText: '确认'})
        })
      },
      //设置默认
      setDefault(id:number){
        lh.post('/dir/default/set',{id}).then(o=>{
          this.list=o
        }).catch(e=>{
          console.log(e)
          ElMessageBox.alert(e, '错误', {confirmButtonText: '确认'})
        })
      },
      //选择目录
      dirSelect(){
        lh.post('/dir/select').then(o=>{
          this.form.path=o.filePaths[0]
        }).catch(e=>{
          console.log(e)
          ElMessageBox.alert(e, '错误', {confirmButtonText: '确认'})
        })
      },
      //添加排除
      addExclude(){
        lh.post('/dir/exclude/add',this.formExc).then(o=>{
          ElMessage({type:'success',message: '添加成功',})
          this.list=o
          this.show.addExclude=false
        }).catch(e=>{
          console.log(e)
          ElMessageBox.alert(e, '错误', {confirmButtonText: '确认'})
        })
      },
      //添加目录
      add(){
        if(!this.form.path){
          ElMessage({type: 'error',message: '目录不能为空'})
          return
        }

        //判断list中是否已经存在改路径
        for(let v of this.list){
          if(v.path==this.form.path){
            ElMessage({type: 'error',message: '目录已存在'})
            return
          }
        }

        //添加
        lh.post('/dir/add',this.form).then(o=>{
          this.list=o
          this.show.add=false
          ElMessage({type:'success',message: '添加成功',})
        }).catch(e=>{
          console.log(e)
          ElMessageBox.alert(e, '错误', {confirmButtonText: '确认'})
        })
      },
      //移除目录
      del(value:any){
        ElMessageBox.confirm('移除 '+value.path+' ('+value.desc+')'+' 的列表记录？','提示',{
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(()=>{
          lh.post('/dir/del',{id:value.id}).then(o=>{
            this.list=o
            ElMessage({type:'success',message: '移除成功',})
          }).catch(e=>{
            console.log(e)
            ElMessageBox.alert(e, '错误', {confirmButtonText: '确认'})
          })
        }).catch(()=>{})
      }
    }
  }
</script>

<style scoped>
  .table{
    margin-top:10px;
  }
</style>